<script setup>
import Preload from '../components/Preload.vue'
import '@animxyz/core'
import phrases from '../assets/json/phrases.json'

function getRandomInt(max) {
  return Math.floor(Math.random() * max + 0.1)
}
let image = getRandomInt(3)
</script>

<template>
  <Preload />
  <XyzTransition appear xyz="fade duration-14 delay-4">
    <div class="h-[68vh] w-full">
      <h2 class="pb-5 text-center text-xl font-bold text-black sm:text-2xl">
        {{ phrases[getRandomInt(15)] }}
      </h2>
      <img v-if="image === 1" src="../assets/img/Home/winter1.jpg" alt=""
        class="h-full w-full rounded-3xl object-cover" />
      <img v-else-if="image === 2" src="../assets/img/Home/winter2.jpg" alt=""
        class="h-full w-full rounded-3xl object-cover" />
      <img v-else src="../assets/img/Home/winter3.jpg" alt="" class="h-full w-full rounded-3xl object-cover" />
    </div>
  </XyzTransition>
</template>
